<template>
    <div class="footer">
        <span class="deadline">截止 {{deadline}}</span>
        <span class="middleop">
            <strong class="double" v-if="back"><b>{{bean | getcaidou}}</b><b>不中返还</b></strong>
            <strong v-else>{{bean | getcaidou}}</strong>
            <!--<a href="javascript:;">查看</a>-->
        </span>
        <span class="resultcon">
                            <strong class="doing" v-if="timeState===1">{{timeState | getstatus}}</strong>

            <template v-if="jinstate">
                <strong v-if="winState===1" class="red">{{jinstate}} <b>红</b></strong>
                <strong v-if="winState===2" class="black">{{jinstate}} <b>黑</b></strong>
            </template>

        </span>
    </div>
</template>

<script>
    export default {
        name: 'Bottominfo',
        props: ['deadline', 'back', 'timeState', 'bean', 'winState', 'jinstate'],
        filters: {
            getstatus(timeState){
                //timeState (integer, optional): 方案时间状态(0.销售中 1.进行中 2.已结束) ,
                if(timeState === 0) {
                    return '销售中';
                }
                if(timeState === 1) {
                    return '进行中';
                }
                if(timeState === 2) {
                    return '已结束';
                }
            },
            getcaidou(value){
                if(value > 0) {
                    return value + '彩豆'
                }
                return '免费'
            }
        }
    }
</script>

<style scoped lang="less" rel="stylesheet/less">
    @import "../router/app.less";

    .footer {
        display: flex;
        align-items: center;
        .deadline {
            font-size: @fz26;
            color: @color3;
            width: 286px;
        }
        .middleop {
            font-size: @fz28;
            flex: 1;
            a {
                color: @color13;
            }
            strong {
                color: @colororange;
            }
            .double {
                border: 1px solid @colororange;
                border-radius: 6px;
                box-sizing: border-box;
                b {
                    padding: 0 10px;
                    .setnormalcss(46px);
                    &:first-child {
                        background: @colororange;
                        color: #fff;
                        font-size: @fz28;
                    }
                    &:last-child {
                        color: @colororange;
                        font-size: @fz20;
                    }
                }
            }
        }
        .resultcon {
            font-size: @fz24;
            span {
                display: flex;
                align-items: center;
            }
            b {
                height: 30px;
                width: 30px;
                color: #fff;
                display: inline-block;
                line-height: 30px;
                text-align: center;
                border-radius: 2px;
            }
            .red {
                color: @color22;
                b {
                    background: @color22;
                }
            }
            .black {
                b {
                    background: @color1;
                }
            }
            .doing {
                background: @color17;
                .setnormalcss(28px);
                border-radius: 4px;
                color: #fff;
                width: 84px;
                display: inline-block;
            }
        }
    }

</style>
